<template>
	<view class="p20">
		<view class="w-max h224 pr">
			<image src="/static/img/my/yue_bg.png" class="wh-max " mode=""></image>
			<view class="pa left0 top0 wh-max flex row-between color-fff pl50 pr40">
				<view class="">
					<view class="fs30">账户余额：</view>
					<view class="mt26">
						<text class="fs26">￥</text>
						<text class="fs40 fw-w">{{$user.deposit||'0'}}</text>
					</view>
				</view>
				<view class="w140 h60 tixian_button radius50 flex row-center"
					@click="$u.route('/pages/my/balance/tixian')">
					提现
				</view>
			</view>
		</view>
		<view class="pr fs30 tit-ac flex1 ml24 mt30 mb30">
			<text>提现金额</text>
		</view>
		<!-- <view class="bg-fff radius20 p20">
			<u-search placeholder="请输入关键词" :show-action="false" shape="square" />
			<view class="flex mt10">
				<u-search placeholder="请输入关键词" :show-action="false" shape="square" search-icon="calendar" />
				<view class="pl10 pr10">至</view>
				<u-search placeholder="请输入关键词" :show-action="false" shape="square" search-icon="calendar" />
			</view>
		</view> -->
		<view class="bg-fff radius20 p20">
			<view class="bg-f8f radius12 p20 flex w-max">
				<u-icon name="search" color="#707070" size="32" />
				<view class="flex1 pl20">
					<input type="text" v-model="form.keyword" placeholder="请输入关键词" placeholder-class="color-999 " />
				</view>
			</view>
			<view class="flex mt20">
				<uni-datetime-picker type="datetime" v-model="form.start_time" placeholder="选择开始时间" :border="false">
					<view class="bg-f8f radius12 p20 flex flex1">
						<u-icon name="calendar" color="#707070" size="32" />
						<view class="flex1 pl20">
							<input type="text" v-model="form.start_time" placeholder="开始时间"
								placeholder-class="color-999 " />
						</view>
					</view>
				</uni-datetime-picker>
				<view class="pl10 pr10">至</view>
				<uni-datetime-picker type="datetime" v-model="form.end_time" placeholder="选择开始时间" :border="false">
					<view class="bg-f8f radius12 p20 flex flex1">
						<u-icon name="calendar" color="#707070" size="32" />
						<view class="flex1 pl20">
							<input type="text" v-model="form.end_time" placeholder="结束时间"
								placeholder-class="color-999 " />
						</view>
					</view>
				</uni-datetime-picker>
			</view>
			<u-empty v-if="!list.length" marginTop="50" />
			<view class="pt30 pb30 border-b" v-for="(item,index) in list" :key="index">
				<view class="flex row-between">
					<view class="u-line-1 flrx1">{{item.info}}</view>
					<view class="fs34 color-red">{{item.num}}</view>
				</view>
				<view class="flex row-between mt16">
					<view class="fs26 color-666">订单号：{{item.order_sn}}</view>
					<!-- <view class="color-999">余额：+80.00</view> -->
				</view>
				<view class="flex row-between mt16">
					<view class="fs24 color-999">{{item.create_time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					keyword: '',
					start_time: '',
					end_time: '',
				},
				list: '',
			};
		},
		watch: {
			'form.keyword'(e) {
				this.$u.debounce(this.getList, 500)
			},
			'form.start_time'(e) {
				this.getList()
			},
			'form.end_time'(e) {
				this.getList()
			},
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.getList('down')
		},
		methods: {
			getList(e) {
				e == 'down' ? this.page++ : this.page = 1
				let params = {
					page: this.page,
					...this.form,
				}
				this.$request('/member/withdraw/incomeList', params).then(res => {
					let list = res.data.data
					e == 'down' ? this.list.push(...list) : this.list = list
				})
			},
		}
	}
</script>

<style lang="scss">
	.tixian_button {
		background-color: transparentize($color: #fff, $amount: .80);
		color: #fff;
		border: #fff 1rpx solid;
	}
</style>
